/* * 苏州海管家物流科技有限公司（https://www.hgj.com/）. * 苏公网安备32059002003385号 © 2015-2022 Hgj.com All Rights Reserved. | 苏ICP备15030950号. * @Date: 2022.03.22. * @Author *
@Description 企点 管理后台 - 舱位交易 - 舱位发布详情 模块. **/
<template>
  <Layout>
    <section class="p-5 bg-white mb-5">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="originQuery"
      >
        <el-form-item
          class="w-4/12"
          label="起运港"
          prop="portStart"
        />
        <el-form-item
          class="w-4/12"
          label="目的港"
          prop="portArrive"
        />
        <el-form-item
          class="w-4/12"
          label="发布公司"
          prop="corpId"
        >
          <el-select
            v-model="originQuery.corpId"
            clearable
            filterable
            remote
            reserve-keyword
            placeholder="请输入企业名称"
            :remote-method="queryCompanyInfo"
          >
            <el-option
              v-for="item in companyOpts"
              :key="item.corpId"
              :label="item.qdCompanyName"
              :value="item.corpId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-4/12"
          label="发布时间"
          prop="__dateRange$publishFromDate$publishToDate"
        >
          <el-date-picker
            v-model.trim="originQuery.__dateRange$publishFromDate$publishToDate"
            :picker-options="pickerOptions"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="loading"
            type="primary"
            @click="() => handleQuery({ num: 1 })"
          >
            查询
          </el-button>
          <el-button
            type="primary"
            :disabled="loading"
            @click="() => handleExport()"
          >
            导出
          </el-button>
          <el-button
            :disabled="loading"
            @click="handleReset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div v-if="query.shippingSpaceId">
        舱位编号为
        {{ query.shippingSpaceId }} 的结果，点击重置以显示全部
      </div>
    </section>
    <section>
      <el-table
        ref="table"
        :data="tableList"
        border
      >
        <el-table-column
          label="发布编号"
          prop="id"
        />
        <el-table-column
          label="舱位编号"
          prop="shippingSpaceId"
        />
        <el-table-column
          label="起运港"
          prop="portStart"
        />
        <el-table-column
          label="目的港"
          prop="portArrive"
        />
        <el-table-column
          label="中转港"
          prop="portTransit"
        />
        <el-table-column
          label="航线代码"
          prop="shippingLineCode"
        />
        <el-table-column
          label="航程"
          prop="sail"
        />
        <el-table-column label="ETD">
          <template #default="{ row }">
            <span>
              {{ returnShortDate(row.etd) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="箱型箱量">
          <template #default="{ row }">
            {{ row.boxInfo == '*' ? '' : row.boxInfo }}
          </template>
        </el-table-column>
        <el-table-column
          label="发布公司"
          prop="pushCompanyName"
        />
        <el-table-column
          label="发布人"
          prop="createBy"
        />
        <el-table-column
          label="发布人手机号"
          prop="pushPhone"
        />
        <el-table-column
          label="发布时间"
          prop="pushTime"
        />
        <el-table-column
          label="触达用户人数"
          prop="subscribePerson"
        />
        <el-table-column
          label="触达用户人次"
          prop="subscribeNum"
        />
        <el-table-column
          label="发起沟通人数"
          prop="contactPerson"
        />
        <el-table-column
          label="发起沟通人次"
          prop="contactNum"
        />
        <el-table-column label="操作">
          <template #default="{ row }">
            <button
              class="del-btn"
              @click="handleDelClick(row)"
            >
              删除
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="total"
          :page-size="query.size"
          @current-change="handlePageChange"
        />
      </div>
    </section>
    <!-- 删除确认 -->
    <el-dialog
      v-model:visible="dialogVisible"
      title="删除发布记录"
      width="340px"
    >
      <p class="pd20">
        确认删除用户的本条舱位发布记录吗？
      </p>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirmClick"
        >确认</el-button>
      </span>
    </el-dialog>
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import { queryCabinDetailList, cabinDetailExport, getReleaseCompany, deleteRecord } from '@/api/cabin'
import dayjs from 'dayjs'
import { getTreeNode } from '@/api/harbor'
import { mapGetters } from 'vuex'
export default {
    components: {
        Layout
    },
    data() {
        return {
            query: {
                num: 1,
                size: 10
            },
            deleteId: '',
            dialogVisible: false,
            originQuery: {},
            tableList: [],
            harborList: [],
            companyList: [],
            companyOpts: [],
            companyOptsOrigin: [],
            total: 0,
            loading: false,
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.selectDate = minDate.getTime()
                    if (maxDate) {
                        this.selectDate = ''
                    }
                },
                disabledDate: (time) => {
                    let nowTime = Date.now()
                    const getDisable = () => {
                        if (this.selectDate !== '') {
                            const one = 183 * 24 * 3600 * 1000
                            const minTime = this.selectDate - one
                            const maxTime = this.selectDate + one
                            return time.getTime() < minTime || time.getTime() > maxTime
                        }
                    }
                    return time.getTime() > nowTime || getDisable()
                }
            }
        }
    },
    created() {
        if (this.cabinId) {
            this.query.shippingSpaceId = this.cabinId
            this.$store.dispatch('cabin/setCabinId', null)
        }
        this.init()
        // this.queryCompanyInfo()
        this.getShownCompanyInfo()
    },
    computed: {
        ...mapGetters({
            cabinId: 'cabin/getCabinId'
        })
    },
    methods: {
        handleGoDetail(row) {
            console.log(row)
        },
        calcSaleStr(val) {
            if (!val?.boxs) return
            const arr = []
            val.boxs.forEach((i) => {
                arr.push(`$${i.sale}/${i.boxType}`)
            })
            return arr.join(',')
        },
        calcCostStr(val) {
            if (!val?.boxs) return
            const arr = []
            val.boxs.forEach((i) => {
                arr.push(`$${i.cost}/${i.boxType}`)
            })
            return arr.join(',')
        },
        async handleExport() {
            if (!this.query.__dateRange$publishFromDate$publishToDate) return this.$message.warning('导出必须选择一段时间')
            const q = {
                ...this.query
            }
            if (q.portArrive) {
                q.portArrive = q.portArriveId
            }
            if (q.portStart) {
                q.portStart = q.portStartId
            }
            try {
                this.loading = true
                let res = await cabinDetailExport(q)
                const url = window.URL.createObjectURL(
                    new Blob([res], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    })
                )
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', `舱位发布详情_${dayjs().format('YYYY-MM-DD_HH_mm_ss')}.xlsx`)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            } catch (e) {
                console.log(e)
            } finally {
                this.loading = false
            }
        },
        handleAfterSelect(type, node) {
            if (type == 1) {
                if (!node) {
                    this.originQuery.portStart = ''
                    this.originQuery.portStartId = ''
                    this.originQuery.portStartLevel = ''
                }
                delete this.originQuery.metaStart
            }
            if (type == 2) {
                if (!node) {
                    this.originQuery.portArrive = ''
                    this.originQuery.portArriveId = ''
                    this.originQuery.portArriveLevel = ''
                }
                delete this.originQuery.metaArrive
            }
        },
        async getShownCompanyInfo() {
            let res = await getReleaseCompany({ isPublished: true })
            this.companyOptsOrigin = res.data
            this.companyOpts = res.data.slice(0, 100)
        },
        async queryCompanyInfo(val) {
            this.companyOpts = this.companyOptsOrigin.filter((i) => i.qdCompanyName.includes(val) || i.corpId.includes(val)).slice(0, 100)
        },
        returnShortDate(val) {
            return val ? dayjs(val).format('YYYY-MM-DD') : val
        },
        async init() {
            this.handleQuery()
        },
        initData() {
            this.getHarborData()
        },
        handlePageChange() {
            this.searchFunc()
        },
        async getHarborData() {
            let res = await getTreeNode(0)
            this.harborList = res.data
        },
        async handleQuery() {
            this.query = { ...this.query, ...this.originQuery }
            this.query.num = 1
            this.searchFunc()
        },
        async searchFunc() {
            const p = {
                ...this.query
            }
            if (this.query.portStart) {
                p.portStart = this.query.portStartId
            }
            if (this.query.portArrive) {
                p.portArrive = this.query.portArriveId
            }
            try {
                this.loading = true
                let res = await queryCabinDetailList(p)
                this.total = res.data.total
                this.tableList = res.data.records
            } catch (error) {
                console.log(error)
            } finally {
                this.loading = false
            }
        },
        handleReset() {
            this.query = {
                num: 1,
                size: 10
            }
            this.originQuery = {}
            this.handleQuery()
        },
        /**
         *@Description 删除.
         *@Return .
         **/
        handleDelClick(item) {
            this.deleteId = item.shippingSpaceId
            this.dialogVisible = true
        },
        /**
         *@Description 删除 确认按钮.
         *@Return .
         **/
        handleConfirmClick() {
            deleteRecord(this.deleteId).then(() => {
                this.$message.success('删除成功！')
                this.dialogVisible = false
                this.init()
            })
        }
    }
}
</script>
<style scoped>
.gray {
    color: gray;
}
.underline {
    cursor: pointer;
    color: #006aff;
}
.pd20 {
    padding: 20px;
}
.del-btn {
    color: #5572fd;
    cursor: pointer;
}
</style>
